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Deel 1 


Vuurwerk 
op je website 


Er zijn talloze programma's om tekeningen, geanimeerde teksten, foto's, effecten en nog 


veel meer aan je website toe te voegen. Wil je al je graphics maken of bewerken met één 


professioneel programma, dan is Fireworks van Macromedia een goede keuze. In deze snel- 


cursus leer je de basishandelingen van Fireworks. 


Verken je 
werkplek 


Het documentvenster van Fireworks ver- 
schijnt in het standaard werkvenster zodra je 
een nieuw document aanmaakt (figuur 1). In 
dat documentvenster vind je boven de af- 
beelding vier tabs waarmee je respectievelijk 
het origineel toont, een preview kan zien, of 
tot vier versies van een bewerkte tekening te- 
gelijk kan tonen. Een gestreept lijntje rond de 
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afbeelding vertelt je dat je met een bitmap be- 
zig bent. Zonder kadertje gaat het om een vec- 
tor-afbeelding. 

In een los venster naast je werkvenster zie 
je de werkbalk Toors (figuur 2). Die doet je 
ongetwijfeld sterk denken aan soortgelijke 
toolbars in andere tekenprogramma’s, maar 
voor wie Dreamweaver of Freehand al kent, 
is de gelijkenis nog frappanter. Hier vind je 
al het gereedschap dat je nodig hebt om je 
tekening te maken of aan te passen. On- 
deraan zie je het vakje Corors waarin je 
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kleuren kan kiezen of wijzigen, en daaron- 
der het vakje View, dat je snel laat over- 
schakelen tussen verscheidene modi van 
het programma. 

Zoals alle Macromedia-programma’s maakt 
ook Fireworks druk gebruik van panels die 
je helpen om eigenschappen, gedrag of ka- 
rakteristieken van geselecteerde objecten te 
bepalen ofte wijzigen. Een lijst met panels 
vind je onder de menuopdracht Winpow. 
Je kan panels openen en sluiten, verschui- 
ven of tegen elkaar aanklikken (figuur 3). Ex- 
perimenteer daar een tijdje mee en sla 
- als je eenmaal tevreden bent - je fa- 
voriete panel lay-out op (via PANEL LAY- 
OUT in het menu COMMANDS) zodat Fi- 
reworks bij het ope- 
| nen steeds de ge- 
Ys Tabld ” Optid wenste panels toont. 
Je kan zulke zelfge- 
maakte panel lay-outs 
te allen tijde vinden in 
het menu COMMANDS 
onder de optie PANEL 
LAyY-ouT Sets. Een 
aantal veelgebruikte 
panels kan je ook ope- 
nen vanuit de mini- 
launchbar rechts on- 
deraan je document- 
venster (figuur 4). 
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HEU... IK GEEF PRIVÉLES 
FIREWORKS 4 … 


ERANK VERSTRACTEN OP HET MATE 


Wat is Fireworks? 


Fireworks kan je gebruiken om beweging in je webgraphics te brengen, om illustraties 
op een professionele manier naar je hand te zetten en aan het web aan te passen en om 
geavanceerde interactieve toepassingen op je website te zetten. Het programma kan zo- 
wel overweg met bitmap- als met vector-illustraties en je kan beide types even makkelijk 
bewerken of aanpassen. Bovendien is het een klein kunstje om een eerder gemaakte ani- 
mated gif of een andere toepassing in een handomdraai een ander kleurtje of inhoud te 
geven, mocht dat voor een update van je website nodig zijn. 

Als je intussen al met andere Macromedia-producten werkt zoals Dreamweaver, Free- 
hand of Flash, kan de pret niet meer op. Fireworks werkt zeer nauw samen met al die 
programma’s en spreekt - niet onbelangrijk - dezelfde taal. In alle programma’s worden 
dezelfde termen en dezelfde symbolen gebruikt voor dezelfde dingen. Ook de werkbal- 
ken zien er eender uit, zodat je niet veel extra meer hoeft te leren als je al een ander pro- 
gramma uit de groep kent. Maar ook als je met een andere html- of wysiwyg-editor werkt 
zoals Homesite of FrontPage, is Fireworks een gedienstig knechtje dat al het grafische 
werk voor zijn rekening kan nemen. Het programma genereert desgewenst namelijk 
zelf de nodige html- of JavaScript-code die je zo in je andere toepassing kan plakken. 


Wat doe je zoal met Fireworks? 


Je kan Fireworks gebruiken om een simpel tekeningetje of tekstje te maken voor je web- 
site, maar evengoed voor het ontwerpen van een volledige geïntegreerde website waar- 
bij alle grafische elementen op elkaar zijn afgestemd, dezelfde kleuren en vormen ge- 
bruiken, kortom bij elkaar horen. Bijzonder handig is het maken van pop-upmenu’s of 
roll-overs. Ook het aanpassen en bewerken van afbeeldingen of teksten is mogelijk, bij- 
voorbeeld om de grootte of de resolutie van een foto te verkleinen voor webgebruik. 
Het standaardformaat voor afbeeldingen in Fireworks is png of portable network gra- 
phic. Hoewel dit prima samenwerkt met alle moderne browsers, kan je het probleem- 
loos exporteren naar alle andere gangbare grafische formaten. Ook het importeren van 
bestaande gif's of jpg's is een makkie. Na bewerking kan je ze naar wens weer in het oor- 
spronkelijke formaat opslaan of in het nieuwere png-formaat. 


VOOR GEVORDERDEN D D D 


VAKTAAL 


Animated gif: Een filmpje van meerdere gifplaatjes 
achter elkaar. 


Bitmap-illustratie: bestaat uit puntjes die naast 
elkaar in een rooster zijn gerangschikt. Elk puntje 
heeft een bepaalde helderheid en kleur. Vergroten van 
een bitmap kan de kwaliteit van de afbeelding sterk 
beïnvloeden en ongewenste effecten hebben zoals 
rafellijntjes. 


Gif: (Graphics Interchange Format) Gecomprimeerde 
opslag van afbeeldingen, met maximaal 256 kleuren. 


Jpg: Een jpg is een grafisch bestandsformaat dat 
vaak wordt gebruikt op internet. Dit formaat maakt 
gebruik van een speciaal inpakmechanisme waardoor 
de plaatjes nòg kleiner kunnen worden. 


Png: (Portable Network Graphic) Een bestandsfor- 
maat dat speciaal voor het web ontworpen werd en 
flexibeler is dan het veelgebruikte gif-formaat. Het 
wordt in de toekomst wellicht het standaardformaat 
op het web. 


Pop-upmenu: Menu dat uitsluitend opties weergeeft 
en alleen verschijnt als een bepaalde functie actief is. 


Roll-over: Een combinatie van verscheidene afbeel- 
dingen of knoppen die verschijnen of verdwijnen naar 
aanleiding van acties met de muis of het toetsenbord. 


Toolbar: Een knoppenbalk boven een programma met 
een aantal snelle functies erop. Deze functies kunnen 
worden geactiveerd door een druk op de knop met 
een muis of een ander aanwijsapparaat. De knoppen 
kunnen allerlei functies bevatten, zoals vette of cur- 
sieve letters in een tekstverwerker of het starten van 
een applicatie in een desktop menu. 


Vector-illustratie: beschrijft een afbeelding in lijnen 
en bogen - zogenaamde vectoren - die meteen ook 
informatie over kleur en helderheid bevatten. Bij het 
vergroten of verkleinen behoudt een vector-afbeelding 
altijd dezelfde kwaliteit. 


Wysiwyg-editor: Wysiwyg staat voor What You See 
Is What You Get (uitspraak: wizzy-wig). Een 
Wysiwyg-editor is bijvoorbeeld de tekstverwerker 
Word die je op je beeldscherm toont hoe de tekst er 
uit gaat zien wanneer deze geprint zou worden. 
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EN 
_ 


DOETS ZELE 


Cursus Fireworks 4 


De kracht van een symbool 


lala Netals Macromedia Flash maakt ook Fo 


File Edit View Insert Modify Text Commands Xtras Window Help reworks gebruik van symbolen. Dat zijn HS 
cycleerbare elementen. Als ze eenmaal aan- 


gemaakt zijn, kan je zogenaamde “nstan- 
ces’ - zeg maar: kopieën - van dat symbool 
in je project gebruiken zo vaak je maar wilt. 
Je kan de kopie vergroten of verkleinen, om- 
draaien, spiegelen of vervormen. Als je het 
symbool zelf bewerkt, erven alle ‘instances’ 
meteen ook de wijzigingen. Zo’n symbool 
kan een afbeelding (graphic) zijn, maar ook 
een knop of een animatie. 
Symbolen worden bij elk project opgesla- 
gen in een bijbehorende ‘Library’ (biblio- 
theek) (figuur 5). Ook dat is een panel dat je 
Graphic - 4 
me kan den oe sluiten. de ee Bn 
vanuit de Library naar het ‘Canvas’ (het 
ed werkvlak) in je documentvenster om het te 
gebruiken. Misschien klinkt dit nu nog een 
beetje ijl in je oren, maar als je er eenmaal 
mee werkt, zal je al gauw beseffen welke 
(Graphic Symbol mln 4 an mogelijkheden zulke symbolen bie- 
en. 
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figuur 5 


Ls open je de TEKST Eprror. Kies daar een =lolxf 
Een simpele ne 
gewenst lettertype en grootte, tekstkleur rame 


en eventuele andere teksteigenschap- El oeleelel wooeento er gone) 


b anner pen, waarna je een tekst intikt, ‘Clickx’ 


bijvoorbeeld (figuur 7). Klik op OK en 
XI verschuif vervolgens de tekst naar de 
r Canvas Size: 520.3K gewenste plek. 

Width: [4oo [Piels v] w: 400 We doen dit nog een tweede keer over 


Heist F3 [Poe hes met een tweede tekstje ‘forever’ in een 


ander kleurtje en met Brushscript als 


olstion: [72 |P: ] $ 
enn in z lettertype. Na wat heen en weer schui- 


en ven met beide tekstjes is het resultaat 5 EEEN EEN Pe 
C White bevredigend (figuur 8), wat we kunnen Ferondmorechiees 
Pin zien in de PREVIEW. Onze eerste ban- balb 
€ Cuson ner staat er. 
Cancel File Edit View Insert Modify Text Commands Xtras Window Help 
figuur6 Het wordt de hoogste tijd dat we ook iets 
gaan doen met Fireworks. Laten we om te ES de dels ul 
beginnen eens een simpele banner maken. | EE els =lslzf7, 
Begin met een nieuw document aan te ma- Sfroox | aAfs  offsmoothAntiAies | W AutoKem 


ken. Klik op Fire en vervolgens New, kies in 
de dialoogbox een breedte van 400 en een 
hoogte van 333 pixels en selecteer onderaan 
een gewenst kleurtje met de colorbox (figuur 
6). Zodra je op OK klikt, verschijnt het nieu- 
we documentvenster met de gekozen kleur 
als achtergrond. Laten we daar een tekstje 
op zetten. Klik in je werkbalk Toors op de 
Tekst Toor (de knop met de letter A) en klik 
vervolgens in je documentvenster. Daarmee 
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figuur 7 
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Simpel animeren 


SMT A STER 


figuur 9 


Toch is zo’n statisch ding niet echt aantrek- 
kelijk. Laten we van deze banner eens een 
simpele animatie maken. Proberen we maar 
eens het woordje ‘forever’ van links naar 
rechts door het beeld te laten glijden. We 
maken eerst onze werkruimte wat groter 
door met de rand van het documentvenster 
te slepen, selecteren vervolgens het woord 
‘forever’ en schuiven dat links buiten beeld 
(Águur 9). Het woord zelf is nu niet meer te 
zien, maar het kadertje eromheen verraadt 
waar het staat. Selecteer nu dat kader door 
erop te klikken en kies dan in het menu Mo- 
DIFY voor ANIMATE en vervolgens voor ANI- 
MATE SELECTION. Dat doet de ANIMATE-dia- 
loogbox opfloepen. Zet het aantal frames op 
20, laat de rest ongemoeid en klik op OK (fi- 
guur ro). In een kadertje vraagt men je of de 
nieuwe frames automatisch mogen aange- 
maakt worden (figuur 11). Je klikt uiteraard 
op OK. De vraag is zo evident dat je ze voor 
de toekomst net zo goed kan uitschakelen 
door het vakje DON’T SHOW AGAIN onderaan 
links aan te vinken. 

In je documentvenster merk je nu dat het 
vakje rond ‘forever’ gewijzigd is. Er staat een 
dikke lijn in het midden, die bij nader toe- 
zien uit twintig elkaar overlappende bolle- 
tjes blijkt te bestaan. Die geven telkens het 
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middelpunt van de animatie 
aan in de twintig opeenvol- 
gende frames. Het beginpunt 
is een groen bolletje, het eind- 
punt een rood, de tussenlig- 
gende blauw. Sleep het rode 
bolletje naar rechts tot een stuk 
voorbij de banner (figuur 12). 
Nu kunnen we eindelijk onze 
eerste animatie bekijken. On- 


rirevore E 


The animation of this symbol extends beyond the last frame of 
the document. Automatically add new frames? 


[Don't show again 


figuur 11 


deraan links van het documentvenster zijn 
nu enkele knoppen verschenen die je met- 
een herkent van je cd- of cassettespeler. Klik 
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figuur 14 


op de knop PLAY en je ziet inderdaad het 
woordje ‘forever’ van links naar rechts over 
je scherm glijden (figuur 13). 

Gelukt! Hoewel, waar is het woord ‘Clickx’ 
gebleven? Dat is alleen maar heel even in 
een flits te zien in het begin van de anima- 
tie. Logisch eigenlijk. Het staat alleen op het 
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figuur 10 
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figuur 15 


eerste frame. Dat is overigens gauw gecor- 
rigeerd. Zet de animatie stil met de sror- 
knop en ga terug naar het eerste frame met 
de linkerknop. Selecteer het woord ‘Clickx’ 
en open alweer via Mopiry en ANIMATE de 
ANIMATE SELECTION-dialoogbox (figuur 14). 
Zet het aantal frames op 20 (evenveel als 
‘forever’ dus), en Move en DIRECTION op 


Nog meer animatie 


Nu die eerste geanimeerde banner er staat, 
gaan we er meteen een paar finesses van 
bekijken. Zoals alle eigenschappen in Fi- 
reworks kunnen ook deze van animaties in 
panels bekeken en ingesteld worden. Twee 
panels zijn belangrijk voor animaties: FRA- 
MES en OBJECT. Open (als ze al niet open 
staan) beide genoemde panels (figuur 17). 
Selecteer nu de animatie ‘Clickx’ en kies 
FRAME 1 in het FRAMES-panel. In het OBJECT- 
panel zien we de instellingen van de ani- 
matie. Zet SCALING op 150 om daarmee het 
woord ‘Clickx’ van het eerste tot het twin- 
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figuur 16 


NUL. Move geeft aan hoeveel pixels de ani- 
matie moet verschuiven, geen enkele dus. 
Het woord blijft immers staan. DIRECTION 
geeft de richting in graden aan waarin dat 
gebeurt. Nur is van links naar rechts, 180 
van rechts naar links, go pal naar boven, 
270 even pal naar beneden. Als we nu op 
OK klikken, zien we midden in het ‘Clickx’- 
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kadertje een rood bolletje staan (figuur 15). 
Het groene en de 18 blauwe zitten eronder 
verborgen, wat betekent dat het woord in 
alle frames op dezelfde plaats blijft staan. 
En kijk, onze eerste animatie werkt precies 
zoals wij het ons hebben voorgesteld (figuur 
16). 
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figuur 19 
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figuur 18 


tigste frame met de helft te 
laten groeien. Bij ‘Opacity’ 
laten we in het linkervak- 
je roo staan en vullen in 
het rechter 25 in. Het 
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woord ‘Clickx’ begint nu 
op volle sterkte, maar ver- 
vaagt langzaam naar fra- 
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me 20 toe, hoewel het nooit hele- 
maal verdwijnt. Je kan de anima- 
tie ook nog laten ronddraaien: he- 
lemaal als je 360 invult, maar wij 
stellen ons tevreden met een kan- 
teling van ro graden, clockwise 
(CW) (figuur 18). Het resultaat 
mag er zijn, al zeg ik het zelf (fi- 
guur 19). Vergeet het niet op te 
slaan via het menu Fie en SAVE 
of met de toetscombinatie 
CTRL+S. 

Ten slotte nog dit: ben je niet helemaal te- 
vreden over het animatiepad, dan kan je dit 
nog altijd wijzigen door het eenvoudigweg 
te verslepen. Sleep je het rode of het groe- 
ne bolletje, dan wijzig je de hoek van de ani- 
matie. Versleep je om het even welk blauw 
bolletje, dan wordt de hele animatie even- 
wijdig verplaatst. 


Giftig, maar 
geanimeerd 


We hebben nu een goed werkende banner, 
opgeslagen in een geanimeerd png-bestand. 
Helaas kan onze browser daar (voorlopig) niet 
veel mee aanvangen. Een gewone png-af- 
beelding gaat prima, maar animatie wil tot 
nader order niet lukken. Om onze animatie 
geschikt te maken voor het net, is het nodig 
er een animated gif van te maken. Gelukkig 
kan dat heel eenvoudig in Fireworks. 

Open eerst het panel OPTIMIZE (via het menu 
Winpow) en kies daar voor ANIMATED GIF (fi- 
guur 20). Als dat gebeurd is, start je de Ex- 
PORT WIZARD in het menu Fire. Eerst kies je 
voor SELECT AN EXPORT FORMAT, klik dan op 
CONTINUE (figuur 21). Vervolgens selecteer je 
ANIMATED GIF en klik je weer op CONTINUE (fi- 
guur 22). Dan kom je terecht in de eigenlijke 
EXPORT PREVIEW waar je nog allerhande in- 
stellingen en effecten kan controleren, bekij- 
ken of wijzigen (figuur 23). Als je helemaal 
tevreden bent, klik je op Export en de ani- 
mated gif wordt aangemaakt. Je kan die nu 
gewoon als een afbeelding in je html-pagina 
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The Export Wizard helps you: 

| 

| Select an export format. | 
Find ways to minimize the size and maximize the quality of your image after | 
you select an export format. 
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Frames: 
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figuur 22 
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figuur 25 


GRATIS GIF-MENGERS 


Alchemy GIF Animator 
[ www.alchemy- 
lab.com/products/agif | 


AniMagic GIF Animator 
[ http://rtlsoft.com/animagic/ | 


Barbarossa GIF Animator 
[ wwuw.liatro.net/eng/babarosa | 


CoffeeCup GIF Animator 
[ www.coffeecup.com/animator | 


Gamani GIF MovieGear 
[ www.gamani.com | 


GIF Construction Set Professional 
[ www.mindworkshop.com/alchemy/ 
gifcon.html ] 


Gypsee Pro 
[ www.gypsee.com | 


Selteco Bannershop GIF Animator 
[ www.selteco.com/bannershop | 


Ulead GIF Animator 
[ wwvw.webutilities.com/products/ 
GAni/runme.htm ] 


Visual GIF Animator 
[ www.matchware.net/products/vga/ 
home_en.htm ] 


Zoner GIF Animator 
[ wwuw.zoner.com/animator/ 
overview.asp | 


in plaats van IMAGES ONLY. In het vakje HTML 
verschijnt dan EXPORT HTML-FILE (figuur 24). 
Na bewaren blijkt er naast het gif-bestand ook 
nog een html-bestand aangemaakt te zijn met 
dezelfde naam. Als je dat opent in een brow- 
ser, zie je meteen de werkende animated gif. 


Leuk extraatje is hier dat de achtergrondkleur 


inbrengen met de <IMG>-tag. 

Het kan echter nog eenvoudiger door Fire- 
works zelf de html-code te laten aanmaken. 
Kies daartoe in het Firr-menu voor EXPORT en 
kies voor OPSLAAN ALS type HTML AND IMAGES 


van de animated gif wordt gekopieerd naar 
de achtergrond van de pagina, waardoor pa- 
gina en afbeelding naadloos in elkaar overlo- 


pen (figuur 25). 


— Willy Schuyesmans — 


VIND JE FIREWORKS TE DUUR? 


Als het je alleen maar gaat om het maken van een animated gif, hoef je natuurlijk het toch vrij dure 
Fireworks niet te kopen. Dat kost immers zo’n € 450 (18.152 BEF), al is het vaak veel goedkoper in 
combinatie met andere Macromedia-pakketten als Dreamweaver. Op de freeware- en shareware- 
markt zijn er echter tal van goede gratis of goedkope programma's verkrijgbaar waarmee je in een 


handomdraai een animated gif maakt. Soms moet je dan wel zelf eerst met een grafisch programma 
de afzonderlijke frames aanmaken. Met een beetje knutselen is je resultaat even goed als met Fi- 
reworks, al is het gemak van zo’n pakket natuurlijk juist dat alles hier geïntegreerd is (en dat je er 
natuurlijk nog veel meer mogelijkheden mee hebt dan alleen maar animated gifs maken). 

Voor wie elke euro tweemaal omdraait voor hij hem uitgeeft, hierboven een lijstje met de beste 
gratis gif-mengers. 


CLICKX MAGAZINE 2 - 20 NOVEMBER 2001 


